<script setup lang="ts">
import { useMergeLogDetail } from "@fl/api/elevator-api";
import { SearchTable } from "@fl/components";
import { cloneDeep } from "lodash-es";
import type { VxeGridProps, VxePagerEvents } from "vxe-table";

const visible = defineModel("visible", { type: Boolean, default: false });
const id = defineModel("id", { type: String, default: "" });
const isMain = defineModel("isMain", { type: Boolean, default: false });
const records = ref<any>();
const gridOptions = reactive<VxeGridProps>({
    columns: [
        { title: "序号", type: "seq", width: 60 },
        {
            field: "applyNo",
            title: "编号",
            type: "expand",
            slots: { default: "expand", content: "expand_content" },
        },
        { field: "areaName", title: "所在区" },
        {
            field: "streetName",
            title: "街道",
        },
        { field: "communityName", title: "社区" },
        { field: "projectName", title: "小区名称" },
        { field: "building", title: "栋" },
        { field: "unit", title: "单元" },
    ],
    expandConfig: {
        expandAll: true,
        reserve: true,
    },
});
const subGridOptions = reactive<VxeGridProps>({
    columns: [
        { title: "序号", type: "seq", width: 60 },
        { field: "applicantMobile", title: "上报人账号" },
        { field: "ownerName", title: "业主姓名" },
        { field: "ownerIdCard", title: "业主身份证号" },
        { field: "houseAddr", title: "详细地址" },
        {
            field: "reportIdentity",
            slots: { default: "reportIdentity" },
            title: "上报人身份",
        },
        { field: "reportMobile", title: "联系方式" },
        { field: "createTime", title: "提交时间" },
    ],
});
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage;
    tablePage.pageSize = pageSize;
};
const tablePage = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
});
const params = computed(() => ({
    id: id.value,
    isMain: isMain.value,
    pageIndex: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    orderBy: "create_time", // 根据创建时间排序
    orderType: "desc", // 降序
}));
const { data, isLoading } = useMergeLogDetail(params);
watchEffect(() => {
    if (data.value) {
        records.value = cloneDeep(data.value.records);
        tablePage.total = data.value.total!;
    }
});
</script>
<template>
    <ElDialog
        v-model="visible"
        title="合并记录详情"
        width="70%"
        :destroy-on-close="true"
        :height="800"
    >
        <SearchTable
            v-bind="gridOptions"
            :data="records"
            :loading="isLoading"
            @page-change="handlePageChange"
            v-model:pager="tablePage"
        >
            <template #expand="{ row }">
                {{ row.applyNo }}
            </template>
            <template #expand_content="{ row }">
                <SearchTable v-bind="subGridOptions" :data="row.applyList" class="table2">
                    <template #reportIdentity="{ row }">
                        {{
                            row.reportIdentity == 1
                                ? "业主"
                                : `非业主-${row.reportRelation}`
                        }}
                    </template>
                </SearchTable>
            </template>
        </SearchTable>
    </ElDialog>
</template>
<style lang="scss" scoped>
:deep(.table2 .vxe-toolbar) {
    display: none;
}

:deep(.table2 .vxe-cell) {
    font-size: 12px;
}

:deep(.table2 .vxe-body--column) {
    background-image: none;

    .vxe-body--row {
        background: none;
    }
}

:deep(.table2 .vxe-body--row) {
    background: rgb(251, 242, 242);
}

:deep(.table2 .vxe-table--body-wrapper) {
    background: rgb(251, 242, 242);
}

:deep(.table2 .vxe-header--row) {
    background: rgb(251, 242, 242) !important;
}

:deep(.vxe-table--body-wrapper.body--wrapper) {
    min-height: 0 !important;
}
</style>
